<template>
	<div class="body">
		<!-- 最顶部轮播 -->
		<van-swipe class="my-swipe" :autoplay="1500" indicator-color="white">
			<van-swipe-item v-for="(item,index) in this.$store.state.bannerList" :key="index">
				<img :src="item.picUrl" />
			</van-swipe-item>
		</van-swipe>

		<!-- 中间4宫格 -->
		<div class="swipe_down">
			<div v-for="(item,index) in classItem" :key="index" class="swipe_item">
				<img :src="item.img">
				<div>{{item.title}}</div>
			</div>
		</div>
		
		<!-- 那条灰色的线 -->
		<div class="hr-gary"></div>
		
		<!-- 全民砍价！ -->
		<div class="allkan">
			<div class="allkan_item" @click="goto">
				全民砍价 >
			</div>
		</div>
		
		<!-- 砍价列表，商品卡片手动 -->
		<div class="kan_body">
			<div class="kan_body_item" v-for="(item,index) in this.$store.state.kanjiaList" :key="index" 
			v-show="item.id > 99761" @click="goto">
					<img :src="item.pic">
				<div class="kan_body_right">
					<div class="div_font">{{item.name}}</div>
					<div class="span_font">{{item.characteristic}}</div>
					<div class="more_span">
						<span class="span_left">
							<div class="span_left_top">￥{{item.minPrice}}</div>
							<div class="span_left_down">低价</div>
						</span>
						<span class="span_mid">
							<div class="span_left_top">￥{{item.originalPrice}}</div>
							<div class="span_left_down">原价</div>
						</span>
						<span class="span_mid_last">
							<div class="span_left_top">{{item.stores}}</div>
							<div class="span_left_down">限量</div>
						</span>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 商品卡片和精选专题中间的灰色 -->
		<div class="hr-gary"></div>
		
		<!-- 精选专题！ -->
		<Swiper_news :newsList="newsList" class="sw"/>
		
		<!-- 中间的灰色 -->
		<div class="hr-gary"></div>
		
		<!-- 人气推荐！ -->
		<div class="allkan_three">人气推荐 ></div>
		
		<!-- 人气推荐列表 -->
		<PelList :pelList="pelList"/>
		
		<div class="down_down"></div>
	</div>
</template>

<script>
	import Swiper_news from "../components/swipeJingx";
	import PelList from "../components/pelList"
	export default {
		components:{
			Swiper_news,PelList
		},
		data() {
			return {
				classItem: [{
						img: require("../assets/qiandao.png"),
						title: "签到",
					},
					{
						img: require("../assets/liwu.png"),
						title: "礼卷",
					},
					{
						img: require("../assets/huangguan.png"),
						title: "砍价",
					},
					{
						img: require("../assets/deng.png"),
						title: "专栏",
					},
				]
			}
		},
		mounted() {
			this.$APIClient.getStoreList().then((res) => {
				// console.log(res)
			});

			// 轮播图获取数据
			this.$APIClient.banner().then(res => {
				// console.log(res.data.data)
				this.$store.state.bannerList = res.data.data
			});
			
			this.$APIClient.kanjiaItem().then(res => {
				// console.log(res.data.data)
				this.$store.state.kanjiaList = res.data.data.goodsMap
			});
			
			this.$APIClient.HiscrollItem().then(res => {
				// console.log(res.data.data)
				this.newsList = res.data.data
			});
			
			this.$APIClient.tuijianList().then(res => {
				// console.log(res.data.data.goodsMap)
				this.pelList = res.data.data.goodsMap
			})
		},
		methods:{
			goto(){
				this.$router.push({
					path:'Kanjiainner'
				})
			}
		}
	}
</script>

<style scoped>
	.body {
		height: 200rem;
	}

	.my-swipe img {
		width: 100%;
	}

	.swipe_down {
		width: 100%;
		height: 10rem;
		background-color: #fff;
		border-radius: 20% 20% 0 0;
		display: flex;
		justify-content:space-around ;
		margin-top: -10rem;
		position: absolute;
	}
	
	.swipe_item
	{
		font-size: 1.5rem;
		margin-top: 1rem;
	}
	
	.hr-gary
	{
		width: 100%;
		height: 1.8rem;
		background-color: #F5F5F5;
	}
	
	.allkan
	{
		width: 100%;
		height: 4.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 0.05rem solid #E9E9E9;
	}
	
	.kan_body_right
	{
		margin-left: 1rem;
	}
	
	.kan_body_item
	{
		width: 100%;
		height: 10rem;
		margin-top: 1rem;
		border-bottom: 0.05rem solid #E9E9E9;
		display: flex;
	}
	
	.div_font
	{
		margin-bottom: 0.5rem;
	}
	
	.kan_body_item img
	{
		width: 10rem;
		height: 10rem;
		margin-top: -7px;
		border-radius: 6%;
	}
	
	.span_font
	{
		color: #B2B2B2;
		font-size: 0.24rem;
		margin-bottom: 1.2rem;
	}
	
	.span_left .span_left_top
	{
		color: #D00000;
		margin-bottom: 0.3rem;
		font-weight: 700;
	}
	
	.span_left_down
	{
		font-size: 0.3rem;
	}
	
	.more_span
	{
		display: flex;
		margin-left: -2.5rem;
	}
	
	.more_span span
	{
		margin-left: 2.5rem;
	}
	
	.span_mid
	{
		color: #B2B2B2;
	}
	
	.span_mid .span_left_top
	{
		margin-bottom: 0.3rem;
		font-weight: 700;
	}
	
	.span_mid_last .span_left_top
	{
		color: #B2B2B2;
		
	}
	
	.span_mid_last
	{
		margin-top: 0.15rem;
	}
	
	.span_mid_last .span_left_down
	{
		color: #B2B2B2;
		margin-top: 0.3rem;
		margin-left: -0.5rem;
	}
	
	.sw
	{
		margin-top: -280px;
	}
	
	.allkan_three
	{
		width: 100%;
		height: 4.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.body
	{
		width: 100%;
		height: 100%;
	}
	
	.down_down
	{
		height: 80px;
	}
</style>